<template>
    <div class="login-form">
    <el-form 
        :model="formData" 
        ref="loginform"
        :rules="rules" 
        >  
        <el-form-item class="form-item" prop="username">
            <el-input  
            v-model="formData.username"
            placeholder="用户名/手机"
           >
            </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="password">
            <el-input  
            v-model="formData.password"
            placeholder="密码" 
            type="password"
           >
            </el-input>
        </el-form-item>
    </el-form>
    <el-row type="flex" justify="end">        
            <el-button type="text">忘记密码</el-button>        
    </el-row>
        <el-button 
        class="login-btn"
        type="primary"
        @click="loginFn">
            登录
        </el-button>   
   </div>
</template>

<script>
export default {
    data(){
        return {
            // 表单数据
            formData: {
                username: "",   // 登录用户名/手机
                password: "",    // 登录密码
            },
            // 表单规则
            rules: {
                username: [
                { 
                    required: true, 
                    message: '请输入用户名', 
                    trigger: 'blur' 
                },
                {
                    pattern:/^1[3-9]\d{9}$/,message:'手机号码格式不正确',trigger:'blur'
                },
            ],
                 password: [
                { 
                    required: true, 
                    message: '请输入密码', 
                    trigger: 'blur' 
                },
            ],
          },
        }
    },
    mounted(){
        console.log(66,this.$refs.loginform)
    },
    methods: {       
        // 提交登录
        loginFn(){           
        // 验证表单
         this.$refs.loginform.validate((valid) => {
            console.log(valid)
        // valid:true表示校验通过，否则不通过
         if (valid) {                
                     console.log('校验通过')
                     //调用接口函数
                     this.$axios({
                        url:'/accounts/login',
                        method:'post',
                        data:{
                            username:this.formData.username,
                            password:this.formData.password
                        }
                     }).then(res=>{
                        //token：是网站的登陆凭证
                        //user：保存了用户的相关信息
                        //因为token和user信息是属于该网站通用的，所以得把这些数据保存为全局数据，这样方便后期使用
                        console.log('登陆成功',res)                       
                        //如何保存为全局的数据呢？
                        //答：vue提供了一个插件供我们使用---vuex
                        //在nuxt.js项目中默认已经帮我们下载好了vuex插件了直接使用
                        //ore目录就是nuxt.js项目提供好给我们写全局数据的地方

                        //调用mutations中的函数的方法this.$store.commit('文件名',函数名)
                        this.$store.commit('user/SET_UserInfo',res.data)
                        //跳转首页
                        this.$router.replace('/')

                     })
                 }else{
                    console.log('校验不通过');
                 }
             })
         
          }
     }
}

</script>

<style scoped lang="less">
    .login-form{
        padding:25px;
    }

    .form-item{
        margin-bottom:20px;
    }

    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }

    .login-btn{
        width:100%;
        margin-top:10px;
    }
</style>
